<template>
	<view class="pageBox">
		<Header :title="'确认订单'"></Header>
		<view class="top_one" @click="todizhi" style="width: 710rpx;">
			<image src="../../../static/dinwei.png" mode="aspectFill" class="one_img"></image>
			<view v-if="shopaddres">
				<view class="title">{{shopaddres.address}}{{shopaddres.detail}}</view>
				<view class="pohone">{{shopaddres.contact}} {{shopaddres.phone}}</view>
			</view>
			<view v-else>
				<view class="title">请选择地址</view>
			</view>
			<u-icon name="arrow-right" size="24"></u-icon>
		</view>
		<view class="xia_box" style="width: 710rpx;">
			<view class="xia_name">{{adopt.fosterName}}</view>
			<view class="xia_one">
				<image :src="adopt.imgId" mode="aspectFill" class="moimage"></image>
				<view class="marl">
					<view class="MART">{{adopt.varietyName}}<span class="san_one">￥</span><span>{{adopt.money}}</span>
					</view>
				</view>
			</view>
		</view>

		<view class="two_box" style="width: 710rpx;" v-if="adopt.varietyName=='悬壶蜂箱'">
			<view class="two_din">
				<view class="two_din_box">
					<u-icon name="rmb-circle-fill" color="#D42A1B" size="28"></u-icon>
					<view class="two_din_zi">下单优惠</view>
				</view>
				<view style="color:#D42A1B;font-size: 28rpx;">
					-3000
				</view>
			</view>
		</view>
		<view class="two_box" style="width: 710rpx;" @click="manner()">
			<view class="two_din" style="align-items: center;">
				<view class="two_din_box">
					<u-icon name="gift-fill" color="#D42A1B" size="28"></u-icon>
					<view class="two_din_zi">领蜜方式</view>
				</view>
				<view style="display: flex;align-items: center;">
					<view class="two_din_zi" style="font-size: 26rpx;color: #999999;">{{adoptWayName}}</view>
					<u-icon name="arrow-right" size="15"></u-icon>
				</view>
			</view>
		</view>

		<view class="two_box" style="width: 710rpx;" @click="fangan()">
			<view class="two_din" style="align-items: center;">
				<view class="two_din_box">
					<u-icon name="rmb-circle-fill" color="#D42A1B" size="28"></u-icon>
					<view class="two_din_zi">认养方案</view>
				</view>
				<view style="display: flex;align-items: center;">
					<view class="two_din_zi" style="font-size: 26rpx;color: #999999;">{{fananName}}</view>
					<u-icon name="arrow-right" size="15"></u-icon>
				</view>
			</view>
		</view>



		<view class="adoptionRules1">
			<view class="adoptionRules" @click="goRulesDetails()" style="width: 710rpx;">
				<view class="text">
					<u-icon name="question-circle" :color="'#F55726'" size="18"></u-icon>
					<view style="margin-left: 10rpx;">
						{{titleKey}}须知
					</view>
				</view>
				<u-icon name="arrow-right" size="15"></u-icon>
			</view>
			<view class="text" style="margin-left: 15rpx;">
				<text v-if="scheme==0">
					方案A:
					每年投入仅需1800元养殖费(饲养费+饲料费+数字设备费+流量费)
					每年收益:每年保底20斤蜜(超过20斤的为认养者所有，多产多得)
					蜂蜜寄送:含普通包装及省内邮寄费精包装及省外邮费另行付费
					认养时间:认养时间为整年最少认养1年
				</text>
				<text v-if="scheme==1">
					方案B:
					平台代转租:养殖费1800元由第三方租赁人支付
					收益:一年累计获得6斤蜂蜜，(下单当天领取2斤后面4斤每6个月各领取2斤)
					蜂蜜寄送:含普通包装及省内邮寄费精包装及省外邮费另行付费
					认养时间:认养时间为整年最少认养1年
				</text>
				<text v-if="scheme==2">
					方案C:
					一年收益:一年累计获得2斤蜂蜜，(下单当天领取)每年获得租金300元，(租满整年支付)
					蜂蜜寄送:含普通包装及省内邮寄费精包装及省外邮费另行付费
					认养时间:认养时间为整年，最少认养1年
				</text>
			</view>
			
		</view>

		<view class="number_box" style="width: 710rpx;" v-if="scheme==0">
			<view class="number_boxflx">
				<view class="" style="font-size:30rpx;">购买年数（{{(adopt.feedCost*12).toFixed(2)}}元/年）</view>
				<u-number-box v-model="number" @change="valChange" :color1="'#fff'" :input-width="40" :input-height="40"
					:bgColor1="'#21B070'" :min='1'></u-number-box>
			</view>
		</view>
		<view class="two_box" style="width: 710rpx;">
			<view class="two_din">
				<view class="two_din_box">
					<u-icon name="coupon" color="#F55726" size="28"></u-icon>
					<view class="two_din_zi">礼品卡</view>
				</view>
				<view class="two_box_flx" v-if="!cardId" @click="opne">

					<view class="two_box_text">
						去选择
					</view>
					<u-icon name="arrow-right" size="15"></u-icon>
				</view>

				<view class="two_box_flx" v-else @click="opne">
					<view class="two_box_text">
						已选择礼品卡,金额为<span style="color: red;">{{deductionPrice}}元</span>
					</view>
					<u-icon name="arrow-right" size="15"></u-icon>
				</view>
			</view>
		</view>
		<view class="three_box" style="width: 710rpx;">
			<view class="three_title">{{titleKey}}备注</view>
			<u-input v-model="value1" type="textarea" :border="true" style="margin-top: 20rpx;" placeholder='填写备注' />
		</view>
		<view class="bottom_box">
			<view class="bottom_box_one">
				<view class="bottom_box_la">应付：</view>
				<view class="bottom_box_ba">￥</view>
				<view class="bottom_box_xa">{{payPrice}}</view>
			</view>

			<view class="bottom_box_button" @click="buy">立即支付</view>
		</view>

		<u-popup :show="showpop" @close="closes" :round="20">
			<view class=""
				style="height: 100rpx;text-align: center;font-size: 40rpx;font-weight: 600;line-height: 100rpx;">选择礼品卡
			</view>
			<scroll-view scroll-y="true" style="height: 70vh;" v-if="Carmood.length!=0">
				<view>
					<view class="cradBox" v-for="(item,i) in Carmood">
						<image :src="item.front" class="carImg" mode="aspectFill"></image>
						<view class="money">{{item.money}}元</view>
						<view class="name">{{item.name}}</view>
						<view class="time">{{item.createTime}}到{{item.expirationTime}}</view>
						<view class="change">
							<u-switch space="2" v-model="item.show" activeColor="#f9ae3d"
								inactiveColor="rgb(230, 230, 230)">
							</u-switch>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="" style="height: 70vh;" v-else>
				<u-empty mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png" text='暂未查询可用礼品卡'>
				</u-empty>
			</view>
		</u-popup>


		<u-picker :show="openShow" :columns="fananList" keyName="label" @confirm='fananConfirm'
			@cancel='openShow=false'></u-picker>
		<u-picker :show="show" :columns="columns" keyName="label" @confirm='confirm' @cancel='show=false'></u-picker>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				number: 1,
				count: 5,
				value: 2,
				value1: '',
				mood: {},
				cont: 0,
				shopaddres: null,
				totalPrice: 0,
				carId: '',
				adopt: {},
				showpop: false,
				Carmood: [],
				payPrice: 0,
				deductionPrice: 0,
				cardId: '',
				show: false,
				adoptWay: 2,
				titleKey: uni.getStorageSync('titleKey'),
				adoptWayName: '原蜜邮寄',
				columns: [
					[{
						label: '上门自提',
						id: 1
					}, {
						label: '原蜜邮寄',
						id: 2
					}, {
						label: '二次加工邮寄',
						id: 3
					}]
				],
				openShow: false,
				fananName: '方案A',
				monNumer:0,
				fananList: [
					[{
						label: '方案A',
						id: 0
					}, {
						label: '方案B',
						id: 1
					}, {
						label: '方案C',
						id: 2
					}]
				],
				scheme: 0

			}
		},
		onShow() {
			uni.removeStorageSync('shareIdCode')
			uni.removeStorageSync('subBeehiveId')
			uni.removeStorageSync('varietyId')
			uni.removeStorageSync('farmId')
			if (uni.getStorageSync('shopaddress')) {
				this.shopaddres = JSON.parse(uni.getStorageSync('shopaddress'))
			} else {
				this.address()
			}
		},
		onLoad() {
			if (uni.getStorageSync('adopt')) {
				this.adopt = JSON.parse(uni.getStorageSync('adopt'))
				this.number = this.adopt.buyMonth / 12
				this.totalPrice = (this.adopt.money * 1 + this.adopt.feedCost * this.number * 12).toFixed(2)
				this.payPrice = this.totalPrice
				// this.card()
			}
		},

		components: {
			Header
		},
		methods: {
			confirm(e) {
				this.show = false
				this.adoptWayName = e.value[0].label
				this.adoptWay = e.value[0].id
			},
			fananConfirm(e) {
				this.openShow = false
				this.fananName = e.value[0].label
				this.scheme = e.value[0].id
				if(this.scheme==0){
					this.totalPrice = 0
					this.totalPrice = this.adopt.money * 1 + this.adopt.feedCost * this.monNumer * 12
					this.payPrice = (this.totalPrice - this.deductionPrice).toFixed(2)
					if (this.payPrice < 0) {
						this.payPrice = 0
					}
				}else{
					this.totalPrice = this.adopt.money * 1 
					this.payPrice = (this.totalPrice - this.deductionPrice).toFixed(2)
					if (this.payPrice < 0) {
						this.payPrice = 0
					}
				}
			},
			manner() {
				this.show = true
			},
			fangan() {
				this.openShow = true
			},
			opne() {
				this.showpop = true
			},
			closes() {
				let money = 0
				let cardID = []
				let cont = JSON.parse(JSON.stringify(this.Carmood))
				cont.forEach((item, i) => {
					if (item.show) {
						money += item.money * 1
						cardID.push(item.id)
					}
				})
				cardID = cardID.join()
				this.cardId = cardID
				this.deductionPrice = money
				this.payPrice = (this.totalPrice - this.deductionPrice).toFixed(2)
				if (this.payPrice < 0) {
					this.payPrice = 0
				}
				this.showpop = false
			},
			open() {
				this.showpop = true
			},

			async address() {
				//获取地址列表
				let res = await this.$api.request('system/address/user/defaults')
				this.shopaddres = res.data
			},
			async card() {
				//获取礼品卡列表
				let res = await this.$api.request('manage/card/client/list', 'get', {
					typeId: this.adopt.typeId
				})
				this.Carmood = res.data.list
				this.Carmood.forEach((item, i) => {
					item.show = false
				})
				this.Carmood = JSON.parse(JSON.stringify(this.Carmood))
				console.log(this.Carmood)
			},
			valChange(e) {
				this.totalPrice = 0
				this.totalPrice = this.adopt.money * 1 + this.adopt.feedCost * e.value * 12
				this.monNumer = e.value
				this.payPrice = (this.totalPrice - this.deductionPrice).toFixed(2)
				if (this.payPrice < 0) {
					this.payPrice = 0
				}
			},
			async buy() {
				console.log(this.shopaddres)
				if (!this.shopaddres) {
					uni.showToast({
						title: '请选择收货地址',
						duration: 2000,
						icon: 'error'
					});
					return
				}
				let moeby = 0
				if (this.deductionPrice - this.totalPrice > 0) {
					moeby = this.deductionPrice - (this.deductionPrice - this.totalPrice)
				} else {
					moeby = this.deductionPrice
				}
				// let formdata = {
				// 	totalNum: this.number,
				// 	totalPrice: this.totalPrice,
				// 	payPrice: this.payPrice,
				// 	deductionPrice: moeby.toFixed(2),
				// 	mark:this.value1,
				// 	fosterId: this.adopt.id,
				// 	addressId: this.shopaddres.id,
				// 	cardId: this.cardId,
				// }
				let formdata = {
					id: this.adopt.BuyId,
					channelCode: 'wx_lite',
					buyMonth: this.number * 12,
					channelExtras: '',
					addressId: this.shopaddres.id,
					scence: 2,
					adoptWay: this.adoptWay,
					scheme:this.scheme
					// shareId:this.adopt.shareId
				}
				//认养购买
				let res = await this.$api.request('pay/order/submit', 'post', formdata)
				if (res.code == '200') {
					if (!this.payPrice) {
						uni.removeStorageSync('shopaddress')
						uni.removeStorageSync('adopt')
						uni.navigateTo({
							url: '/pages/index/success?cont=2'
						})
					} else {
						if (res.msg == '代理商账户扣款成功') {
							uni.navigateTo({
								url: '/pages/index/success?cont=3'
							})
						} else {
							let mood = JSON.parse(res.data.displayContent)
							uni.requestPayment({
								provider: 'wxpay', // 服务提提供商
								timeStamp: mood.timeStamp, // 时间戳
								nonceStr: mood.nonceStr, // 随机字符串
								package: mood.packageValue,
								signType: mood.signType, // 签名算法
								paySign: mood.paySign, // 签名
								success: function(res) {
									console.log('支付成功', res);
									uni.removeStorageSync('shopaddress')
									uni.removeStorageSync('adopt')
									uni.navigateTo({
										url: '/pages/index/success?cont=2'
									})
								},
								fail: function(err) {
									console.log('支付失败', err);
								}
							});
						}
					}

				}
			},

			todizhi() {
				uni.navigateTo({
					url: '/pages/my/serve/address?cont=1'
				})
			},
			async goRulesDetails() {
				uni.navigateTo({
					url: '/pages/index/adopt/adoptXuzhi/adoptXuzhi'
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.adoptionRules1 {
		width: 720rpx;
		padding: 20rpx;
		color: #999;
		font-size: 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 0 auto;
	}
	
	.adoptionRules {
		width: 720rpx;
		padding: 20rpx;
		color: #999;
		font-size: 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		margin: 0 auto;
		justify-content: space-between;

		.text {
			display: flex;
			align-items: center;
		}

	}

	.pageBox {
		background-color: #f5f5f5;
		height: 100vh;
		overflow-y: scroll;
		padding-bottom: 150rpx;
		box-sizing: border-box;
	}

	.add {
		width: 200rpx;

	}

	.money {
		color: #fff;
		font-weight: 600;
		font-size: 50rpx;
		position: absolute;
		top: 40%;
		left: 20%;
	}

	.name {
		width: 170rpx;
		height: 55rpx;
		color: #FF9329;
		text-align: center;
		background-color: #fff;
		line-height: 55rpx;
		position: absolute;
		top: 80%;
		left: 10%;
		border-radius: 23rpx;
		font-size: 26rpx;
	}

	.time {
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 82%;
		left: 40%;
	}

	.change {
		position: absolute;
		top: 42%;
		right: 5%;
	}

	.cradBox {
		width: 640rpx;
		height: 360rpx;
		position: relative;
		margin-left: 45rpx;
		margin-top: 20rpx;
	}

	.carImg {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		position: absolute;
	}

	.number_boxflx {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.number_box {
		width: 680rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.two_box_flx {
		display: flex;
		align-items: center;
	}

	.two_box_text {
		color: #999;
		font-size: 28rpx;
		margin-right: 15rpx;
	}

	.bottom_box_ba {
		font-size: 30rpx;
		font-weight: 600;
		color: #D42A1B;
	}

	.bottom_box_xa {
		font-size: 46rpx;
		font-weight: 600;
		color: #D42A1B;
	}

	.bottom_box_la {
		font-size: 30rpx;
	}

	.three_title {
		font-size: 25rpx;
	}

	.three_box {
		width: 680rpx;
		padding: 20rpx;
		margin-left: 15rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.two_xiazi {
		width: 40rpx;
		height: 40rpx;
	}

	.two_din_zi {
		margin-left: 15rpx;
	}

	.two_din_img {
		width: 50rpx;
		height: 50rpx;
	}

	.two_din_box {
		display: flex;
		align-items: center;
	}

	.two_din {
		display: flex;
		justify-content: space-between;
	}

	.two_box {
		width: 680rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin: 20rpx;
		margin-left: 15rpx;
	}

	.san_two {
		margin-top: 15rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.san_one {
		font-size: 24rpx;
		margin-left: 40rpx;
	}

	.MART {
		font-weight: 600;
	}

	.marl {
		margin-left: 20rpx;
	}

	.moimage {
		width: 130rpx;
		height: 130rpx;
		border-radius: 10rpx;
	}

	.xia_one {
		margin-top: 20rpx;
		display: flex;
	}

	.xia_name {
		font-size: 24rpx;
	}

	.xia_box {
		width: 680rpx;
		padding: 20rpx;
		background-color: #fff;
		margin-left: 15rpx;
		border-radius: 10rpx;
	}

	.shuimg {
		width: 11rpx;
		height: 18rpx;
		margin-top: 15rpx;
	}

	.pohone {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.title {
		width: 490rpx;
	}

	.one_img {
		width: 30rpx;
		height: 36rpx;
		margin-top: 15rpx;
	}

	.top_one {
		width: 640rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 40rpx;
		padding-top: 30rpx;
		display: flex;
		margin-left: 15rpx;
		justify-content: space-between;
	}

	.bottom_box_button {
		width: 266rpx;
		height: 65rpx;
		text-align: center;
		line-height: 65rpx;
		color: #fff;
		border-radius: 32.5rpx;
		background-color: #D42A1B;
		margin-right: 50rpx;
	}

	.bottom_box_one {
		display: flex;
		margin-left: 40rpx;
		align-items: center;
	}

	.bottom_box {
		width: 750rpx;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding-top: 15rpx;
		position: fixed;
		bottom: 0%;
	}
</style>